<template>
    <div class="page">
        <!-- 表单 -->
        <commpVxeTable
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columns"
            :formItem="fromItem"
            :isCanWrap='true'
            :conditionBtnRow="true"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" @click="handleAdd" icon="plus">新建计划</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:operation_fsffqlc="{row}" data-desc="是否已发起流程">
                <span v-if="row.fsffqlc == '是'" style="color: #91cc75;">{{ row.fsffqlc }}</span>
                <span v-else style="color: #00BFFF;">否</span>
            </template>
            <template v-slot:operation_fjhzt="{row}" data-desc="计划状态">
                <span v-if="row.fjhzt == '流程结束'" style="color: #91cc75;">{{ row.fjhzt }}</span>
                <span v-else-if="row.fjhzt == '计划中'" style="color: #00BFFF;">{{ row.fjhzt }}</span>
                <span v-else style="color: #00BFFF;">未开始</span>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="操作">
                <a-form layout="inline">
                    <a-form-item>
                        <a-button v-if="row.fsffqlc == '是'" class="green-btn" @click="handlerToDo(row,true)" icon="eye">查看</a-button>
                        <a-button v-else class="green-btn" @click="handlerToDo(row,false)" icon="edit">办理</a-button>
                    </a-form-item>
                    <!-- <a-form-item v-if="isCw && row.fjhzt == '计划中'">
                        <a-button class="blue-btn" @click="handlerEdit(row)" icon="edit">修改</a-button>
                    </a-form-item>
                    <a-form-item v-if="isCw && row.fjhzt == '计划中'">
                        <a-button class="red-btn"  @click="handlerDelete(row)" icon="delete">删除</a-button>
                    </a-form-item> -->
                </a-form>
            </template>
        </commpVxeTable>
        <handleModal ref="handleModalRef" @success="success"/>
        <departmentModal ref="departmentModalRef" @success="success"/>
        <!-- <financeModal ref="financeModalRef" @success="success"/> -->
    </div>
</template>
<script>
//流程接口
import {
    bmyssbAddbmyssb,
    yssbSfcw,
    yssbDelete,
    yssbCheckKsyssb,
} from "./service/index";
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from './handleModal'
import departmentModal from '../department/index'
import financeModal from '../finance/index'
export default {
    components:{
        commpVxeTable,
        handleModal,
        departmentModal,
        financeModal
    },
    props:{},
    data(){
        return{
            isCw: false,
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.bmyssbListbmyssb,
                rowId: 'id',
                urlType: true,
                paramet: {}
            },
            columns: [
                {
                    type: "checkbox",
                    width: 60,
                    fixed: 'left'
                },{
                    field: "fnd",
                    title: "年度",
                },{
                    field: "fsqsj",
                    title: "申请时间",
                    // width: "150",
                },{
                    field: "fsffqlc",
                    title: "是否已发起流程",
                    // width: "150",
                    slots: {
                    // 使用插槽模板渲染
                        default: 'operation_fsffqlc',
                    },
                },{
                    field: "fjhzt",
                    title: "计划状态",
                    // width: "150",
                    slots: {
                    // 使用插槽模板渲染
                        default: 'operation_fjhzt',
                    },
                },{
                    field: "operate",
                    title: "操作",
                    fixed: "right",
                    width: "100",
                    slots: {
                    // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                },
            ],
            fromItem: [
                {
                    model: "fnd",
                    label: "年度",
                },
                // {
                //     model: "fjhzt",
                //     label: "计划状态",
                // },
            ],
            checkboxArr:[],
        }
    },
    watch:{

    },
    mounted(){
        this.$nextTick(()=>{
            this.getYssbSfcw()
        })
    },
    methods:{
        getYssbSfcw(){
            yssbSfcw().then(res => {
                if(res.success && res.result){
                    this.isCw = res.result
                }
            })
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            //console.log('重置')
            this.reCommpVxeTable = Date.now()
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        success(){
            this.reCommpVxeTable = Date.now()
        },
        //选择表格
        checkboxChange(val,records){
            //console.log(val,records)
            this.checkboxArr = val
            //console.log(this.checkboxArr)
        },
        handlerEdit(row) {
            let data = {
                id: row.id,
                fjhmc: row.fjhmc
            }
            this.$refs.handleModalRef.getData(data)
        },
        handleAdd(){
            // this.$refs.handleModalRef.getData({})
            bmyssbAddbmyssb().then(res => {
                if(res.success){
                    this.$message.success(res.message)
                    this.reCommpVxeTable = Date.now()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        handlerDelete(row){
            let that = this
                this.$confirm({
                    title:'您确认要删除吗？',
                    onOk() {
                        yssbDelete({id:row.id}).then(res => {
                            if(res.success){
                                that.$message.success(res.message)
                                that.reCommpVxeTable = Date.now()
                            } else {
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
        },
        async handlerToDo(row,isview){
            // let res = await yssbCheckKsyssb({jhid: row.id})
            // //console.log(res)
            // if(res.success && res.result.length == 1){
            //     let item = res.result[0]
            //     this.$refs.departmentModalRef.getWriteData(item,item.fsffqlc=='是'?true:false)
            // } else if(res.success && res.result.length > 1){
            //     this.$refs.financeModalRef.getData({...row},res.result)
            // } else {
            //     this.$message.warning(res.message)
            // }
            this.$refs.departmentModalRef.getWriteData({...row},isview)
        }
    }
}
</script>
